﻿@model Sealight.Core.DataAdapter.product
@{
    Layout = null;
}
<script language="javascript" type="text/javascript">
    function handlerDeletePicture() {

        $('.delete-picture').unbind('click').click(function () {
            var id = $(this).attr('rel');

            var tr = $(this).parent('td').parent('tr');

            JsUtils.ShowLoader('#listPictureForProduct', 'Xóa...');
            $.ajax({
                type: "POST",
                url: "/admin/product/_DeletePictureMapToProduct",
                data: ({ id: id }),
                dataType: "json",
                error: function (xhr, status, error) { },
                success: function (d) {
                    if (d != null) {
                        if (d.OperationComplete != null && d.OperationComplete == false && d.ErrorCode != null) {
                            if (d.ErrorFriendlyMessage != null) {
                                ShowErrorMessage(d.ErrorFriendlyMessage);
                            }
                            return;
                        }

                        tr.remove();
                    }
                },
                complete: function (d) {
                    JsUtils.hideLoader('#listPictureForProduct');
                },
                cache: false
            }); //end .ajax call
        });
    }
    $(function () {
        handlerDeletePicture();
        var upload = new AjaxUpload('#file_field', {
            action: '/file/UploadFile',
            data: { 'folder': 'pictures' },
            responseType: 'true',
            onComplete: function (file, response) {
                if (response != '0') {
                    $("#hidden_image_name").val(response);
                    var img_src = "/Content/images/pictures/" + response;
                    var img_url = GetImageUrl(img_src, 100, 111, false, 100);
                    $("#picture_field_image").attr("src", img_url);
                }
                else {

                    ShowErrorMessage('invalid file extension (jpg|png|jpeg|gif).');
                }
            }
        });

        $('#btnSavePicture').click(function () {

            var imageName = $("#hidden_image_name").val();
            var productId = $('#product_id').val();

            if (imageName == '') return;
            JsUtils.ShowLoader('#listPictureForProduct', 'Lưu...');
            $.ajax({
                type: "POST",
                url: "/admin/product/_SavePictureForProduct",
                data: ({ productId: productId, imageName: imageName }),
                dataType: "json",
                error: function (xhr, status, error) { },
                success: function (d) {
                    if (d != null) {
                        if (d.OperationComplete != null && d.OperationComplete == false && d.ErrorCode != null) {
                            if (d.ErrorFriendlyMessage != null) {
                                ShowErrorMessage(d.ErrorFriendlyMessage);
                            }
                            return;
                        }

                        ShowErrorMessage("Lưu thành công", "thông báo");

                        var tableData = $('#listPictureForProduct tbody');
                        var tr = '<tr class="rowstyle"><td style="" align="center"><img src="/ImageHandler.axd?imageSource=~/Content/images/pictures/' + imageName + '&width=100&height=111"/></td><td style="cursor:pointer;" align="center"> <a class="delete-picture" rel="' + d.id + '"> Xóa </a> </td></tr>'

                        tableData.append(tr);


                        $("#hidden_image_name").val('');
                        $('#product_id').val('');
                        handlerDeletePicture();
                    }
                },
                complete: function (d) {
                    JsUtils.hideLoader('#listPictureForProduct');
                },
                cache: false
            }); //end .ajax call

        });
    });
</script>
<div>
    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                <span title="The category image.">Chọn hình:</span>
            </td>
            <td class="adminData">
                <img src="/ImageHandler.axd?imageSource=~/Content/images/no-photo-click.png&width=100&height=111" id="picture_field_image" title="Picture" alt="Picture"/><input type="hidden" name="hidden_image_name" id="hidden_image_name" />
                <input type="file" name="file_field" id="file_field" title="Choose a new category image to upload."
                    class="adminInput" />
            </td>
        </tr>
    </table>
    <br />
     <input type="button" value="Thêm" id="btnSavePicture" class="adminButtonBlue"
        title="Lưu" />
    <br />
    <table class="tablestyle" cellspacing="0" rules="all" border="1" id="listPictureForProduct" style="width: 100%;
        border-collapse: collapse;">
        <tbody>
            <tr class="headerstyle">               
                <th align="center" scope="col">
                    Hình
                </th>
                <th align="center" scope="col">
                    Xóa
                </th>
            </tr>
            @if (Model != null && Model.pictures != null)
            {
                foreach (var cat in Model.pictures)
                {
                <tr class="rowstyle">                  
                    <td style="" align="center">
                    <img src="/ImageHandler.axd?imageSource=~/Content/images/pictures/@cat.picture_url&width=100&height=111"/>
                    </td>
                    <td style="cursor:pointer;" align="center">
                        <a class="delete-picture" rel="@cat.id">Xóa </a>
                    </td>
                </tr>
                }
            }
        </tbody>
    </table>
</div>
